<template>
  <div class="device-search">
    <Space>
      <span class="search-time">查询时间</span>
      <span @click.once="changeInitCalendarPage" class="date-box">
        <RangePicker
          v-model:value="timeValue"
          format="YYYY-MM-DD HH:mm:ss"
          show-time
          :default-time="['00:00:00', '23:59:59']"
          :disabled-date="disabledDate"
          value-format="x"
        />
      </span>
      <Button :disabled="!timeValue" @click="() => searchApi()">查询</Button>
    </Space>
    <slot></slot>
  </div>
</template>
<script setup lang="tsx">
import { Button, RangePicker, Space } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Props {
  searchApi: Function;
}
const props = defineProps<Props>();
const timeValue = defineModel<any>('timeValue');
const disabledDate = (val: any) => {
  const current = dayjs();
  return (val = current.endOf('day') && val > current.endOf('day'));
};

const changeInitCalendarPage = () => {
  // let element = document.querySelectorAll(
  //   '.el-picker-panel__icon-btn.el-icon-arrow-left',
  // );
  // console.log(element, 'element');
  // if (element) element[element.length - 1].click();
  console.log('click--');
};
</script>
